﻿<template>
    <div v-bind="$attrs" style="border:1px solid #ccc; padding:4px; min-height:40px;">
        <component v-if="item" :formData="item" v-bind="cell2.attrs" :cfg="cell_cfg2" :is="cell2.cellType" :key="item.ID"
            :title="getCellTitle(item)" :label="getCellLabel(item)" :icon="getCellIcon(item)" :value="getCellValue(item)"
            :tag="getCellTag(item)" :tags="getCellTags(item)" :actions="cell2.actions" :links="cell2.links"
            @click="onEdit(item)" @update:formData="updateCellData(item, $event)" icon-prefix="mlist-cell-icon" center />

        <template v-else-if="!disabled2">
            <div>
                <el-button type="primary" size="small" @click="onEdit(null)">新增</el-button>
            </div>
        </template>
    </div>
</template>

<script>
import { Server } from '../main';

export default {
    name: "ItemEdit",
    props: {
        modelValue: Number,
        tbname: {
            type: String,
            required: true
        },
        itemField: String,
        pidField: {
            type: String,
            required: true
        },
        pidFieldCode:{
            //父表的ID字段
            type:String,
            default:"ID"
        },
        formData: Object,
        disabled: Boolean,
        formName: String,
        save2Server:Boolean //新增修改时候直接保存到服务器

    },
    emits: ["update:modelValue"],
    data() {
        return {
            tb: null,
            item: null,
            cell2: {},
            cell_cfg2: {}
        }
    },
    created() {
        this.$server.getDM(this.tbname).then(tb => {
            this.tb = tb;
            this.cell2 = { title: "Name", value: "", label: "", icon: "", cellType: "my-cell" , ...tb.cell};
            this.cell_cfg2 = tb.cell;
            if (this.formData && this.itemField) {
                this.item = this.formData[this.itemField];
            }
        })
    },
    methods: {
        onEdit(item) {
            if (this.disabled2) return;
            item = item || { ID: 0 };
            item.ID = item.ID || 0;
            item._pformData = this.formData;
            
            item[this.pidField] = this.formData[this.pidFieldCode];
            let formName = this.formName || "form";
            let itemID = this.save2Server ? item.ID : item;
            let editItem = (!item.ID || !this.save2Server) ? item : undefined;
            Server.dlg.edit(this.tbname, itemID, editItem, formName, {saveThenReload:this.save2Server}).then(data => {
                if(data["_action"]=="delete"){
                    this.item = null;
                    this.$emit("update:modelValue", null);
                    if (this.formData && this.itemField) {
                        this.formData[this.itemField] = null;
                    }
                    return;
                }
                this.item = data;
                this.item._pformData  = this.formData._pformData;
                this.$emit("update:modelValue", data.ID);
                if (this.formData && this.itemField) {
                    this.formData[this.itemField] = data;
                }
            })
        },
        updateCellData(item, data) {
            if (this.disabled2) return;
            this.$emit("update:formData", item, data);
        },
        getCellTitle(item) {
            return this.parseCellValue(item, this.cell2.title);
        },
        getCellLabel(item) {
            return this.parseCellValue(item, this.cell2.label);
        },
        getCellValue(item) {
            return this.parseCellValue(item, this.cell2.value);
        },
        getCellTag(item) {
            return this.parseCellValue(item, this.cell2.tag);
        },
        getCellTags(item) {
            if (this.cell2.tags && this.cell2.tags.startsWith("format_")) {
                return this.cell2.tags;
            }
            let tags = (this.cell2.tags || "").split(";").filter(p => p.length > 0).map(p => {
                return this.parseCellValue(item, p);
            });
            return tags.join(";");
        },
        getCellIcon(item) {
            return this.parseCellValue(item, this.cell2.icon);
        },
        parseCellValue(item, tag) {
            if (tag) {
                let val = this.$server.dm_format(this.tb.columns, item, tag);
                return val;
            }
            return "";
        },
    },
    computed: {
        disabled2() {
            return this.disabled || !this.tb || !this.formData || !this.formData.ID;
        }
    },
    watch:{
        formData(){
            if (this.formData && this.itemField) {
                this.item = this.formData[this.itemField];
            }
        }
    }
}





</script>

<style scoped></style>